<!-- 司机详情 -->
<template>
  <div class="dashboard-container driver-detail">
    <el-card style="margin:20px">
      <div class="aside-box">
        <!-- 表头切换 -->
        <div class="el-aside">
          <span
            class="aside-item"
            :class="{active:flag}"
            style="margin-right:50px"
            @click="flag=true"
          >基本信息</span>
          <span
            class="aside-item"
            :class="{active:!flag}"
            @click="flag=false"
          >驾驶证信息</span>
        </div>
      </div>
      <!-- 基本信息 -->
      <div
        v-show="flag"
        class="in"
      >
        <el-form
          ref="form"
          :model="form"
          :rules="formRules"
          label-width="90px"
          label-position="left"
          hide-required-asterisk="true"
        >
          <el-row
            type="flex"
            justify="space-between"
            style="height:60px"
          >
            <el-col :span="7">

              <span v-if="!isEdit">员工编号：{{ driverData.userId }}</span>
              <el-form-item
                v-if="isEdit"
                prop="userId"
                class="item"
                label="员工编号："
              >
                <el-input
                  v-model="form.userId"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <span v-if="!isEdit">司机名称：{{ driverData.name }}</span>
              <el-form-item
                v-if="isEdit"
                prop="name"
                class="item"
                label="司机名称："
              >
                <el-input
                  v-model="form.name"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <span v-if="!isEdit">所属机构：{{ driverData.agency.name }}</span>
              <el-form-item
                v-if="isEdit"
                prop="agency"
                class="item"
                label="所属机构："
              >
                <el-input
                  v-model="form.agency"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            type="flex"
            justify="space-between"
            style="height:60px"
          >
            <el-col :span="7">
              <span v-if="!isEdit">电话：{{ driverData.mobile }}</span>
              <el-form-item
                v-if="isEdit"
                class="item"
                prop="mobile"
                label="电话"
              >
                <el-input
                  v-model="form.mobile"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <span v-if="!isEdit">年龄：{{ driverData.age }}</span>
              <el-form-item
                v-if="isEdit"
                class="item"
                prop="age"
                label="年龄："
              >
                <el-input v-model="form.age" />
              </el-form-item>
            </el-col>
            <el-col :span="7"></el-col>

          </el-row>
        </el-form>
      </div>
      <!-- 驾驶证信息 -->
      <div
        v-show="!flag"
        class="in"
      >
        <el-form
          ref="Licenseform"
          :model="Licenseform"
          label-width="135px"
          label-position="left"
          hide-required-asterisk="true"
          :rules="LicenseformRules"
        >
          <el-row
            type="flex"
            justify="space-between"
            style="height:60px"
          >
            <el-col :span="7">

              <span v-if="!isEdit">驾驶证号：{{ driverLicenseData.licenseNumber }}</span>
              <el-form-item
                v-if="isEdit"
                prop="licenseNumber"
                class="item"
                label="驾驶证号："
              >
                <el-input
                  v-model="Licenseform.licenseNumber"
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <span v-if="!isEdit">准驾车型：{{ driverLicenseData.allowableType }}</span>
              <el-form-item
                v-if="isEdit"
                prop="allowableType"
                class="item"
                label="准驾车型："
              >
                <el-input
                  v-model="Licenseform.allowableType"
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <span v-if="!isEdit">初次领证日期：{{ driverLicenseData.initialCertificateDate }}</span>
              <el-form-item
                v-if="isEdit"
                prop="initialCertificateDate"
                class="item"
                label="初次领证日期："
              >
                <el-date-picker
                  v-model="Licenseform.initialCertificateDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row><el-row
            type="flex"
            justify="space-between"
            style="height:60px"
          >
            <el-col :span="7">

              <span v-if="!isEdit">驾驶证有效期限：{{ driverLicenseData.validPeriod }}</span>
              <el-form-item
                v-if="isEdit"
                prop="validPeriod"
                class="item"
                label="驾驶证有效期限："
              >
                <el-input
                  v-model="Licenseform.validPeriod"
                >
                  <span
                    slot="suffix"
                    style="margin-right:10px;color:#000"
                  >年</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <span v-if="!isEdit">驾龄：{{ driverLicenseData.driverAge }}</span>
              <el-form-item
                v-if="isEdit"
                prop="driverAge"
                class="item"
                label="驾龄："
              >
                <el-input
                  v-model="Licenseform.driverAge"
                >
                  <span
                    slot="suffix"
                    style="margin-right:10px;color:#000"
                  >年</span>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <span v-if="!isEdit">驾驶证类型：{{ driverLicenseData.licenseType }}</span>
              <el-form-item
                v-if="isEdit"
                prop="licenseType"
                class="item"
                label="驾驶证类型："
              >
                <el-input
                  v-model="Licenseform.licenseType"
                />
              </el-form-item>
            </el-col>
          </el-row><el-row
            type="flex"
            justify="space-between"
            style="height:60px"
          >
            <el-col :span="7">

              <span v-if="!isEdit">从业资格证：{{ driverLicenseData.qualificationCertificate }}</span>
              <el-form-item
                v-if="isEdit"
                prop="qualificationCertificate"
                class="item"
                label="从业资格证："
              >
                <el-input
                  v-model="Licenseform.qualificationCertificate"
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <span v-if="!isEdit">入场证信息：{{ driverLicenseData.passCertificate }}</span>
              <el-form-item
                v-if="isEdit"
                prop="passCertificate"
                class="item"
                label="入场证信息："
              >
                <el-input
                  v-model="Licenseform.passCertificate"
                />
              </el-form-item>
            </el-col>
            <el-col :span="7">
            </el-col>
          </el-row>
          <el-form-item
            label="图片信息"
            class="item"
          >
            <el-row type="flex">
              <img
                v-for="item in avatar"
                :key="item"
                :src="item"
                alt=""
                style="width:250px;height:150px;margin-right:15px"
              >
              <el-upload
                v-if="isEdit"
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="imageUrl"
                  :src="imageUrl"
                  class="avatar"
                >
                <i
                  v-else
                  class="el-icon-plus avatar-uploader-icon"
                >上传图片</i>
              </el-upload>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <div class="footer">
        <el-row
          type="flex"
          justify="center"
        >
          <el-button
            v-if="!isEdit"
            type="danger"
            class="button"
            @click="editDriverMsg(flag)"
          >
            编辑
          </el-button>
          <el-button
            v-if="isEdit"
            type="danger"
            class="button"
            @click="driverDetailUpdate(flag)"
          >
            保存
          </el-button>
          <el-button
            v-if="isEdit"
            class="button"
            @click="btnCancel()"
          >
            取消
          </el-button>
        </el-row>
      </div>
    </el-card>
  </div>
</template>
<script>
import { driverDetail, driverDetailUpdate, driverLicenseDetail, driverLicenseDetailUpdate } from '@/api/transit'
export default {
  data() {
    return {
      flag: true,
      isEdit: false,
      driverData: {},
      form: {
        userId: '',
        name: '',
        avatar: '',
        mobile: '',
        age: '',
        workNumber: '',
        workStatus: '',
        agency: ''
      },
      formRules: {
        age: [{ required: true, message: '年龄不能为空', trigger: 'blur' }]
      },
      driverLicenseData: {},
      Licenseform: {},
      LicenseformRules: {
        licenseNumber: [{ required: true, message: '驾驶证号不能为空', trigger: 'blur' }],
        allowableType: [{ required: true, message: '准驾车型不能为空', trigger: 'blur' }],
        validPeriod: [{ required: true, message: '驾驶证有效期限不能为空', trigger: 'blur' }],
        driverAge: [{ required: true, message: '驾龄不能为空', trigger: 'blur' }],
        licenseType: [{ required: true, message: '驾驶证类型不能为空', trigger: 'blur' }],
        qualificationCertificate: [{ required: true, message: '从业资格证不能为空', trigger: 'blur' }],
        passCertificate: [{ required: true, message: '入场证信息不能为空', trigger: 'blur' }]
      },
      avatar: [],
      imageUrl: ''
    }
  },
  created() {
    this.getdriverDetail()
    // console.log(this.$route.params.id)
    if (!this.$route.query.id) {
      this.$router.push('driver')
    }
  },
  methods: {
    // 获取数据
    async getdriverDetail() {
      // vuex 取id
      // console.log('1', this.$store.getters.driverId)
      const id = localStorage.getItem('driverId')
      console.log(id)
      // 基本信息
      const { data } = await driverDetail(id)
      // 驾驶证证信息
      const res = await driverLicenseDetail(id)
      // console.log('驾驶证', res)
      // console.log('基本信息', data)
      this.driverData = data
      this.driverLicenseData = res.data
      this.avatar = this.driverLicenseData.picture.split(',')
      console.log(this.driverLicenseData)
    },
    // 点击添加
    editDriverMsg (flag) {
      this.isEdit = true
      console.log(flag)
      this.form = {
        userId: this.driverData.userId,
        name: this.driverData.name,
        avatar: this.driverData.picture,
        mobile: this.driverData.mobile,
        age: this.driverData.age,
        workNumber: this.driverData.account,
        workStatus: this.driverData.workStatus,
        agency: this.driverData.agency.name
      }
      this.Licenseform = { ...this.driverLicenseData }
    },
    // 点击保存
    async driverDetailUpdate(flag) {
      if (flag) {
        this.$refs.form.validate(async (isOK) => {
          if (isOK) {
            await driverDetailUpdate(this.form.userId, { ...this.form })
            this.$message.success('修改成功')
            // this.getdriverDetail()
            this.driverData.age = this.form.age
            this.btnCancel()
            console.log(1)
          }
        })
      } else {
        this.$refs.Licenseform.validate(async (isOK) => {
          if (isOK) {
            console.log({ ...this.Licenseform })
            this.Licenseform.id = +this.Licenseform.id
            this.Licenseform.userId = +this.Licenseform.userId
            console.log({ ...this.Licenseform }, this.Licenseform.userId.toString())
            await driverLicenseDetailUpdate({ ...this.Licenseform })
            this.$message.success('修改成功')
            this.driverLicenseData = { ...this.Licenseform }
            this.btnCancel()
          }
        })
      }
    },
    // 点击取消
    btnCancel() {
      this.isEdit = false
      this.form = {
        userId: '',
        name: '',
        avatar: '',
        mobile: '',
        age: '',
        workNumber: '',
        workStatus: '',
        agency: ''
      }
      this.$refs.form.resetFields()
      this.Licenseform = {
        allowableType: '',
        driverAge: '',
        id: '',
        initialCertificateDate: '',
        licenseNumber: '',
        licenseType: '',
        passCertificate: '',
        picture: '',
        qualificationCertificate: '',
        userId: '',
        validPeriod: ''
      }
      this.$refs.Licenseform.resetFields()
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'png/jpeg/jpg'
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 PNG JPEG JPG格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #333;
    border-radius: 6px;
    cursor: pointer;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style lang="scss" scoped>
.active {
  color: #ff643d;
}
</style>
<style lang="scss">
.item .el-form-item__label {
      font-weight: normal;
    }
</style>
<style lang="scss" scoped>
/deep/ .el-input-group__append {
    background-color: #fff;
    border-left:none;
}
.driver-detail {
    /deep/ .el-container{
    flex-direction: column;
    margin-left: 0px;
  }
  .in{
    height: calc(100vh - 350px);
    margin: 40px;
    font-size: 14px;
    position: relative;
        overflow: hidden;
  }
  .footer {
    border-top:1px solid #E5E7EC ;
    .button {
      width: 100px;
      height: 40px;
      margin-top: 20px;
    }
  }
  .aside-box {
    background: #ffffff;
    border-radius: 4px ;
    // box-sizing: border-box;
        .aside-item {
    cursor: pointer;
    }
    /deep/ .el-aside {
      padding-bottom: 14px;
      padding: 4px 37px 24px;
      width: 100%!important;
      display: flex;
      background-color: #ffffff;
      border-bottom:1px solid #E5E7EC ;
      text-align: left;
      font-size: 14px;
      .aside-item.active{
        font-size: 16px;
        font-weight: bold;
        color: #20232A;
        &:after{
          content: '';
          display: block;
          background-color:#E15536 ;
          height: 3px;
          width: 49px;
          margin: 0 auto;
          position: relative;
          top: 14px;
        }
      }
    }
  }
}
</style>
